<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Canvas Performance</title>
	<!--[if IE]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
  <script src="js/deps/jquery.min.js" type="text/javascript"></script>
  <script src="js/deps/highcharts.js" type="text/javascript"></script>
  <!--<script src="js/graph.js" type="text/javascript"></script>-->
  <script src="js/chart.js" type="text/javascript"></script>
  <script>
    var $_GET = {};
    document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
      function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
      }
      $_GET[decode(arguments[1])] = decode(arguments[2]);
    });

    var id = $_GET['id'];
    var chart = new Chart(id);
    chart.render('container');
  </script>

  <style>
    button { font-size: 10px; }
    #filter { margin: 0 auto; text-align: center; width: 300px; }
  </style>
</head>

<body id="home">

  <div id="container"></div>

  <div id="filter">
    <button onclick="chart.filter(/.*/)">All</button>
    <button onclick="chart.filter(Chart.MODERN)">Modern Only</button>
    <button onclick="chart.filter(Chart.MOBILE)">Mobile Only</button>
    <button onclick="chart.filter(/^$/)">None</button>
  </div>

</body>
</html>
